import React, { useState, useEffect } from 'react';
import { Layout, Typography, Button, App } from 'antd';
import { LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import request from '@/api/request';
import MyIcon from '@/components/MyIcon';
import themeColors from '@/core/themeColors';
const { theme } = themeColors;
const { Header, Content, Footer } = Layout;
const { Title } = Typography;

const Home = () => {
  const { message } = App.useApp();
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem('authToken');
    navigate('/login');
  };
  const showMsg = () => {
    message.success('success1')
  }

  const [data, setData] = useState([]);

  const fetchData = async () => {
    try {
      const response = await request.get('/api/example-endpoint');
      console.log(response);
      setData([response.data]);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };
  useEffect(() => {
    // fetchData();
  }, ['']);

  return (
      <Layout className="layout" style={{ minHeight: '100vh' }}>
        <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Title level={3} style={{ color: theme, margin: 0 }}>首页</Title>
          <Button type="primary" icon={<LogoutOutlined />} onClick={handleLogout}>
            退出登录
          </Button>
        </Header>
        <Content style={{ padding: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Title>欢迎来到首页！</Title>

          {/* 自定义iconfont图标 */}
          <MyIcon type="icon-youhuiquan" style={{ fontSize: '30px', color: theme }} />

          <Button type="primary" onClick={() => navigate('/chat')}>对话</Button>
          <Button type="primary" onClick={() => showMsg()}>show message</Button>
          <div>
            {data.map((item) => (
              <div key={item.id}>{item.name}</div>
            ))}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          ©2023 Created by Your Company Name
        </Footer>
      </Layout>
  );
};

const AppWrapper = () => (
  <App>
    <Home />
  </App>
);

export default AppWrapper;